<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{ margin: 0px; padding: 0px;}
	</style>
	<body>
		<canvas id="myCanvas" style="background: #000000;"></canvas>
	</body>
</html>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>

window.onload = function(){
	var canvas = document.getElementById('myCanvas');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var ctx = canvas.getContext('2d');
	
	var centerX = canvas.width/2;
	var centerY = canvas.height/2;
	
	var ball = new Ball(20, 'red');
	ball.x = centerX;
	ball.y = centerY;
	
	var vy = Math.random() * 10 - 5,
		vx = Math.random() * 10 - 5,
		g = 0.2,
		bounce = -0.8;
	
	// 检测碰撞
	function checkGround(ball){
		if ( ball.y + ball.radius > canvas.height) {
			ball.y = canvas.height - ball.radius;
			vy *= -1;
		}else if (ball.y - ball.radius < 0) {
			ball.y = ball.radius;
			vy *= -1;
		}else if (ball.x - ball.radius < 0 ) {
			ball.x = ball.radius;
			vx *= -1;
		}else if (ball.x + ball.radius > canvas.width) {
			ball.x =canvas.width -  ball.radius
			vx *= -1;
		}
	}
	
	
	
	(function drawFrame(){
		window.requestAnimationFrame(drawFrame, canvas);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		
		ball.y += vy;
		ball.x += vx;
		
		
		
		checkGround(ball);
		ball.draw(ctx);
		
	}())
	
}

</script>
